<template>
  <div class="classInformation br bx">
    <div class="classInformationChoose">
      <span class="ml79">班长：</span>
      <div class="chooseBox bx down w226 hideInput">
          <div class="maskIpnut">{{monitor_idVal}}</div>
        <selectMk :liDataGet="studentList" @change="change" dataType='monitor_id' v-if="studentList.length>0"></selectMk>
      </div>
      <span class="ml30">副班长：</span>
      <div class="chooseBox bx down w226 hideInput">
          <div class="maskIpnut">{{vice_monitorVal}}</div>
        <selectMk :liDataGet="studentList" @change="change" dataType='vice_monitor' v-if="studentList.length>0"></selectMk>
      </div>
    </div>
    <div class="classInformationTextarea">
      <span class="importentIcon">班主任寄语：</span>
      <div class="chooseBox bx  w670 ">
        <textarea name="" id="" cols="30" rows="10" v-model="classInformationData.major_bless" maxlength="255" ></textarea>
      </div>
      <div class="classInformationTextareaTips">已输入:<span>{{classInformationData.major_bless.length}}</span> /255</div>
    </div>
    <div class="classInformationTextarea">
      <span class="importentIcon ml46">班级公约：</span>
      <div class="chooseBox bx  w670 ">
        <textarea name="" id="" cols="30" rows="10" v-model="classInformationData.class_convention"  maxlength="255"></textarea>
      </div>
      <div class="classInformationTextareaTips">已输入:<span>{{classInformationData.class_convention.length}}</span> /255</div>
    </div>
    <div class="classInformationTextarea">
      <span class="importentIcon ml46">班级公告：</span>
      <div class="chooseBox bx  w670 ">
        <textarea name="" id="" cols="30" rows="10" v-model="classInformationData.class_announce"  maxlength="255"></textarea>
      </div>
      <div class="classInformationTextareaTips">已输入:<span>{{classInformationData.class_announce.length}}</span> /255</div>
    </div>
    <!-- <div class="common_title_btn" @click="pushData">保存</div> -->
    <el-button type="primary" class="common_title_btn " :loading="pushDataFlag" @click="pushData">保存</el-button>
  </div>


</template>

<script>
  import {
    http
  } from "../../../api/config"; //引入请求

  export default {
    name: 'home',
    data() {
      return {
        studentList:[],
        classData: [{
          value: '在籍'
        }, {
          value: '休学'
        }, {
          value: '毕业'
        }, {
          value: '转校'
        }, {
          value: '退学'
        }],
        class_id: '',
        monitor_idVal:'',
        vice_monitorVal:'',
        pushDataFlag: false,
        classInformationData: {
          class_announce: '',
          class_convention: '',
          major_bless: '',
          monitor_id: '',
          vice_monitor: ''
        }
      }
    },
    methods: {
      change: function (e) { //下拉框插件改变
        // console.log(e)
        //console.log(e)
        switch (e.dataType) {
          case 'monitor_id':
            this.classInformationData.monitor_id=e.id;
            this.monitor_idVal=e.val;
            break;
            case 'vice_monitor':
            this.classInformationData.vice_monitor=e.id;
            this.vice_monitorVal=e.val;
           break;
        }
      },
      pushData() {
        var _this = this;
        var id = this.class_id;
        _this.pushDataFlag = true;




      },
      getData(id) { //获取数据
        let _this = this;

      },
      getStudentData(id) { //获取学生数据
        let _this = this;
        //console.log(id)


      },
      checkLogin() {
        let token = this.$store.state.token;
        if (token) {
          //console.log(token)
        } else {
          this.$store.commit('getLoginData'); //获取数据
          if (this.$store.state.token) {
            //console.log(1)
          } else {
            this.$router.push({
              path: '/login'
            });
          }
        }
      }
    },

    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .classInformation {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 54px 52px;
    overflow: auto;

  }

  .classInformation ::-webkit-scrollbar {
    display: none;

    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;

  }

  .classInformationChoose {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 25px;
  }

  .classInformationTextarea {
    display: flex;
    justify-content: flex-start;
    /* align-items: center; */
    margin-bottom: 34px;
  }

  .w226 {
    width: 226px;
  }

  .chooseBox {
    margin: 0;

    position: relative;
    /* padding-right: 56px; */
  }

  .ml79 {
    margin-left: 79px;
  }

  .ml152 {
    margin-left: 152px;
  }

  span.ml46 {
    margin-left: 46px;
  }

  .w670 {
    width: 670px;
    height: 191px;
    padding: 2px;
  }

  .chooseBox textarea {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    border-radius: 18px;
    resize: none;
    padding: 10px;
    box-sizing: border-box;
  }

  .chooseBox.down::after {
    content: '';
    width: 15px;
    height: 10px;
    position: absolute;
    right: 20px;
    background: url('../../../../static/images/down.png');
    top: 50%;
    transform: translateY(-50%);
  }

  .classInformationTextarea span {
    display: inline-block;
  }

  .importentIcon {
    position: relative;
    margin-left: 30px;
  }

  .importentIcon::before {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    left: -24px;
    top: 10px;
    /* transform: translateY(-50%); */
    background: url('../../../../static/images/importent.png');
  }

  .common_title_btn {
    display: inline-block;
    left: 0;
    bottom: 0;
  }
.classInformationTextareaTips{
  display: flex;
  align-items: flex-end ;
  margin-left: 10px;
}
</style>
